// createRouter 创建路由实例用的
// createWebHistory 创建路由模式用的 History(h5) 模式 路径好看美观，容易 404（有服务器配合就好）
// createWebHashHistory 创建路由模式用的  Hash 模式  带有 # 号，不需要服务器配合，SEO搜索引擎优化（让目标用户更容易找到网站内容） 不太友好
// createMemoryHistory 创建路由模式用的 Memory 模式 路由状态保存在内存中，不反映在 URL 上，用户刷新页面时路由状态会丢失 ssr服务器端渲染，前后端没有分离（php前后端可写）
// 这三个路由模式主要区别是：

import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  createMemoryHistory,
} from 'vue-router'
// 导入组件
import Home from '../views/Home.vue'
// 导入管理员页面
import ManagerIndex from '@/views/manager/ManagerIndex.vue'
import UserList from '@/views/manager/UserList.vue'
import ManagerList from '@/views/manager/ManagerList.vue'
import BannerIndex from '@/views/banner/BannerIndex.vue'
import BannerList from '@/views/banner/BannerList.vue'
import BannerAdd from '@/views/banner/BannerAdd.vue'
import ProIndex from '@/views/pro/ProIndex.vue'
import ProList from '@/views/pro/ProList.vue'
import SeckillList from '@/views/pro/SeckillList.vue'
import EchartsIndex from '@/views/echarts/EchartsIndex.vue'
import EchartsShow from '@/views/echarts/EchartsShow.vue'
import ExcelIndex from '@/views/excel/ExcelIndex.vue'
import ExcelImport from '@/views/excel/ExcelImport.vue'
import ExcelExport from '@/views/excel/ExcelExport.vue'
import EditIndex from '@/views/edit/EditIndex.vue'
import EditShow from '@/views/edit/EditShow.vue'
import MdShow from '@/views/edit/MdShow.vue'
import MapIndex from '@/views/map/MapIndex.vue'
import MapBD from '@/views/map/MapBD.vue'
import MapGD from '@/views/map/MapGD.vue'
export const routes = [
  {
    // 路由路径
    path: '/',
    // 路由名称
    // 当path过于复杂，也可以使用name属性来跳转
    name: 'home',
    // 进入页面路径后打开的页面组件
    component: Home,
    // 配置二级子路由
    children: [
      {
        // 子路由的path无需加 / 开头
        path: 'manager',
        name: 'manager',
        label: '账号管理',
        icon: 'User',
        // 如果有组件需要懒加载，则使用() => import()
        // componen:()=>import('@/views/manager/ManagerIndex.vue'),
        component: ManagerIndex,
        // 配置三级路径
        children: [
          {
            path: 'userList',
            name: 'userList',
            label: '用户管理',
            component: UserList,
          },
          {
            path: 'managerList',
            name: 'managerList',
            label: '管理员管理',
            component: ManagerList,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'banner',
        name: 'banner',
        label: '轮播图管理',
        icon: 'Picture',
        component: BannerIndex,
        // 配置三级路径
        children: [
          {
            path: 'bannerList',
            name: 'bannerList',
            label: '轮播图列表',
            component: BannerList,
          },
          {
            path: 'bannerAdd',
            name: 'bannerAdd',
            label: '轮播图添加',
            component: BannerAdd,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'pro',
        name: 'pro',
        label: '商品管理',
        icon: 'MessageBox',
        component: ProIndex,
        // 配置三级路径
        children: [
          {
            path: 'proList',
            name: 'proList',
            label: '商品列表',
            component: ProList,
          },
          {
            path: 'seckillList',
            name: 'seckillList',
            label: '秒杀列表',
            component: SeckillList,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'echarts',
        name: 'echarts',
        label: '图表管理',
        icon: 'Collection',
        component: EchartsIndex,
        // 配置三级路径
        children: [
          {
            path: 'echartsShow',
            name: 'echartsShow',
            label: '图表显示',
            component: EchartsShow,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'excel',
        name: 'excel',
        label: '文件管理',
        icon: 'Folder',
        component: ExcelIndex,
        // 配置三级路径
        children: [
          {
            path: 'excelImport',
            name: 'excelImport',
            label: '文件导入',
            component: ExcelImport,
          },
          {
            path: 'excelExport',
            name: 'excelExport',
            label: '文件导出',
            component: ExcelExport,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'edit',
        name: 'edit',
        label: '编辑器管理',
        icon: 'Edit',
        component: EditIndex,
        // 配置三级路径
        children: [
          {
            path: 'editShow',
            name: 'editShow',
            label: '富文本编辑器',
            component: EditShow,
          },
          {
            path: 'mdShow',
            name: 'mdShow',
            label: 'markdown编辑器',
            component: MdShow,
          },
        ],
      },
      {
        // 子路由的path无需加 / 开头
        path: 'map',
        name: 'map',
        label: '地图管理',
        icon: 'MapLocation',
        component: MapIndex,
        // 配置三级路径
        children: [
          {
            path: 'mapBD',
            name: 'mapBD',
            label: '百度地图',
            component: MapBD,
          },
          {
            path: 'mapGD',
            name: 'mapGD',
            label: '高德地图',
            component: MapGD,
          },
        ],
      },
    ],
  },
  {
    path: '/login',
    name: 'login',

    // 路由懒加载，什么时候用，就加载
    // 不经常打开的页面使用懒加载
    component: () => import('../views/Login.vue'),
  },
]
// 创建路由实例
const router = createRouter({
  // 配置路由模式  import.meta.env.BASE_URL//服务器根地址 “/”
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  // 配置路由的规则
  routes,
})
// 暴露路由实例
export default router
